<template>
  <div class="dashboard-container">
    <!-- 顶部数据卡片 -->
    <div class="data-cards">
      <el-card class="data-card revenue-card" shadow="hover">
        <div class="card-content">
          <div class="card-header-container">
            <div class="card-icon">
              <el-icon><Money /></el-icon>
            </div>
            <div class="card-header-info">
              <div class="card-title">近30天总营收</div>
              <div class="card-trend" :class="{ 'up': revenueGrowth > 0, 'down': revenueGrowth < 0 }">
                <el-icon v-if="revenueGrowth > 0"><ArrowUp /></el-icon>
                <el-icon v-else><ArrowDown /></el-icon>
                {{ Math.abs(revenueGrowth) }}%
              </div>
            </div>
          </div>
          <div class="card-value-container">
            <div class="card-value">¥{{ totalRevenue.toLocaleString() }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="data-card followers-card" shadow="hover">
        <div class="card-content">
          <div class="card-header-container">
            <div class="card-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="card-header-info">
              <div class="card-title">粉丝总量</div>
              <div class="card-trend" :class="{ 'up': followerGrowth > 0, 'down': followerGrowth < 0 }">
                <el-icon v-if="followerGrowth > 0"><ArrowUp /></el-icon>
                <el-icon v-else><ArrowDown /></el-icon>
                {{ Math.abs(followerGrowth) }}%
              </div>
            </div>
          </div>
          <div class="card-value-container">
            <div class="card-value">{{ totalFollowers.toLocaleString() }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="data-card artists-card" shadow="hover">
        <div class="card-content">
          <div class="card-header-container">
            <div class="card-icon">
              <el-icon><Star /></el-icon>
            </div>
            <div class="card-header-info">
              <div class="card-title">活跃艺人</div>
              <div class="card-trend up">
                <el-icon><ArrowUp /></el-icon>
                {{ activeArtistsGrowth }}%
              </div>
            </div>
          </div>
          <div class="card-value-container">
            <div class="card-value">{{ activeArtists }}</div>
          </div>
        </div>
      </el-card>
      <el-card class="data-card contracts-card" shadow="hover">
        <div class="card-content">
          <div class="card-header-container">
            <div class="card-icon">
              <el-icon><Calendar /></el-icon>
            </div>
            <div class="card-header-info">
              <div class="card-title">即将到期合约</div>
              <div class="card-info">{{ expiringDays }}天内</div>
            </div>
          </div>
          <div class="card-value-container">
            <div class="card-value">{{ expiringSoon }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <!-- 图表区域 -->
    <div class="charts-container">
      <el-row :gutter="24">
        <el-col :span="8" :sm="24" :md="8" :xs="24">
          <el-card class="chart-card follower-chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="header-title">
                  <el-icon><TrendCharts /></el-icon> 
                  <span>粉丝净增量前五榜</span>
                </div>
              </div>
            </template>
            <div id="follower-chart" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :span="8" :sm="24" :md="8" :xs="24">
          <el-card class="chart-card revenue-chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="header-title">
                  <el-icon><Histogram /></el-icon> 
                  <span>营收前五榜</span>
                </div>
              </div>
            </template>
            <div id="revenue-chart" class="chart"></div>
          </el-card>
        </el-col>
        <el-col :span="8" :sm="24" :md="8" :xs="24" style="height: 543px;">
          <el-card class="chart-card activities-card" shadow="hover">
            <template #header>
              <div class="card-header activities-header">
                <div class="header-title">
                  <el-icon><Timer /></el-icon> 
                  <span>近期活动提醒</span>
                  <el-radio-group v-model="activityFilter" size="small" style="margin-top: -20px;">
                    <el-radio-button label="all">全部</el-radio-button>
                    <el-radio-button label="upcoming">即将到来</el-radio-button>
                    <el-radio-button label="completed">已完成</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </template>
            <div class="activities-container">
              <el-empty v-if="filteredActivities.length === 0" description="暂无活动数据"></el-empty>
              <el-timeline v-else>
                <el-timeline-item
                  v-for="activity in filteredActivities"
                  :key="activity.id"
                  :type="activity.status === 'completed' ? 'success' : 'primary'"
                  :color="getActivityColor(activity.importance)"
                  :timestamp="activity.date"
                  placement="top"
                >
                  <div class="activity-item">
                    <div class="activity-title">
                      <el-tag size="small" :type="getActivityTagType(activity.type)" effect="light">
                        {{ getActivityTypeText(activity.type) }}
                      </el-tag>
                      {{ activity.title }}
                    </div>
                    <div class="activity-actions">
                      <el-dropdown trigger="click">
                        <el-button size="small" circle>
                          <el-icon><More /></el-icon>
                        </el-button>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item @click="markActivityComplete(activity.id)">
                              <el-icon><Check /></el-icon>标记为已完成
                            </el-dropdown-item>
                            <el-dropdown-item @click="deleteActivity(activity.id)">
                              <el-icon><Delete /></el-icon>删除事件
                            </el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-row :gutter="24" style="margin-top: 24px;">
        <el-col :span="24">
          <el-card class="chart-card trend-chart-card" shadow="hover">
            <template #header>
              <div class="card-header">
                <div class="header-title">
                  <el-icon><DataLine /></el-icon> 
                  <span>近30天流量趋势</span>
                </div>
                <el-radio-group v-model="trendType" size="small" style="margin-top: 0; margin-right: 52px;">
                  <el-radio-button label="followers">粉丝量</el-radio-button>
                  <el-radio-button label="revenue">营收</el-radio-button>
                </el-radio-group>
              </div>
            </template>
            <div id="trend-chart" class="chart"></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    </div>
</template>

<script>
import { ref, onMounted, watch, computed } from 'vue';
import axios from 'axios';
import * as echarts from 'echarts';
import request from '@/utils/request'
import { 
  ArrowUp, 
  ArrowDown, 
  More, 
  Money, 
  User, 
  Star, 
  Calendar, 
  TrendCharts, 
  Histogram, 
  DataLine, 
  Timer,
  Check,
  Delete
} from '@element-plus/icons-vue';

export default {
  components: {
    ArrowUp,
    ArrowDown,
    More,
    Money,
    User,
    Star,
    Calendar,
    TrendCharts,
    Histogram,
    DataLine,
    Timer,
    Check,
    Delete
  },
  setup() {
    // 数据和引用
    const artistData = ref([]);
    const trendType = ref('followers');
    const trendChart = ref(null);
    const followerChart = ref(null);
    const revenueChart = ref(null);
    
    // 活动相关
    const activities = ref([]);
    const activityFilter = ref('all');
    
    // 计算统计数据
    const totalRevenue = ref(0);
    const totalFollowers = ref(0);
    const revenueGrowth = ref(8.7);
    const followerGrowth = ref(5.2);
    const activeArtists = ref(0);
    const activeArtistsGrowth = ref(12);
    const expiringSoon = ref(0);
    const expiringDays = ref(30);
    
    // 趋势图数据
    const trendData = ref({
      followers: [],
      revenue: []
    });

    // 获取艺人数据
    const fetchArtistData = async () => {
      try {
        const response = await request.get('/getArtistInfo');
        if (response.data.code === 200) {
          artistData.value = response.data.data;
          calculateSummaryData();
          fetchTrendData();
        }
      } catch (error) {
        console.error('获取艺人数据失败:', error);
      }
    };

    // 获取趋势数据
    const fetchTrendData = async () => {
      try {
        const response = await axios.get('/getTrendData');
        if (response.data.code === 200) {
          trendData.value = response.data.data;
          initCharts();
        }
      } catch (error) {
        console.error('获取趋势数据失败:', error);
      }
    };

    // 获取近期活动数据
    const fetchActivities = async () => {
      try {
        const response = await axios.get('/getRecentActivities');
        if (response.data.code === 200) {
          activities.value = response.data.data;
        }
      } catch (error) {
        console.error('获取近期活动数据失败:', error);
      }
    };

    // 过滤活动列表
    const filteredActivities = computed(() => {
      if (activityFilter.value === 'all') {
        return activities.value;
      }
      return activities.value.filter(activity => activity.status === activityFilter.value);
    });

    // 根据活动重要性获取颜色
    const getActivityColor = (importance) => {
      switch (importance) {
        case 'high':
          return '#F56C6C';
        case 'medium':
          return '#E6A23C';
        case 'low':
          return '#409EFF';
        default:
          return '#909399';
      }
    };

    // 获取活动类型标签颜色
    const getActivityTagType = (type) => {
      switch (type) {
        case 'album':
        case 'song':
          return 'danger';
        case 'concert':
          return 'warning';
        case 'contract':
          return 'success';
        case 'variety':
          return 'info';
        case 'endorsement':
          return 'primary';
        default:
          return '';
      }
    };

    // 获取活动类型文本
    const getActivityTypeText = (type) => {
      switch (type) {
        case 'album': return '专辑';
        case 'song': return '单曲';
        case 'concert': return '演唱会';
        case 'contract': return '合约';
        case 'variety': return '综艺';
        case 'endorsement': return '代言';
        default: return '其他';
      }
    };

    // 计算汇总数据
    const calculateSummaryData = () => {
      // 计算总营收和总粉丝
      totalRevenue.value = artistData.value.reduce((sum, artist) => sum + artist.revenueLast30Days, 0);
      totalFollowers.value = artistData.value.reduce((sum, artist) => sum + artist.fansCount, 0);
      
      // 计算活跃艺人数量（状态为"巡演中"或"创作中"）
      activeArtists.value = artistData.value.filter(artist => 
        artist.status  === "巡演中" || artist.status  === "创作中"
      ).length;
      
      // 计算30天内即将到期的合约数量
      expiringSoon.value = artistData.value.filter(artist => 
        artist.contractRemainingDays  > 0 && artist.contractRemainingDays  <= expiringDays.value
      ).length;
    };

    // 初始化所有图表
    const initCharts = () => {
      initFollowerChart();
      initRevenueChart();
      initTrendChart();
    };

    // 初始化粉丝净增量排行榜
    const initFollowerChart = () => {
      // 获取净增量前五的艺人
      const topFollowers = [...artistData.value]
        .sort((a, b) => b.fansIncreaseLast30Days  - a.fansIncreaseLast30Days )
        .slice(0, 5);
      
      const chartDom = document.getElementById('follower-chart');
      followerChart.value = echarts.init(chartDom);
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const value = params[0].value;
            return `<div style="font-weight:bold;margin-bottom:5px;">${params[0].name}</div>` +
                   `粉丝净增量: <span style="color:${value >= 0 ? '#67C23A' : '#F56C6C'};font-weight:bold;">` +
                   `${value >= 0 ? '+' : ''}${value.toLocaleString()}</span>`;
          }
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: function(value) {
              return value >= 10000 ? (value / 10000) + '万' : value;
            },
            color: '#909399',
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: '#EBEEF5',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: topFollowers.map(item => item.name),
          axisLabel: {
            color: '#303133',
            fontWeight: 500,
            fontSize: 12
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '粉丝净增量',
            type: 'bar',
            barWidth: '60%',
            data: topFollowers.map(item => item.fansIncreaseLast30Days),
            itemStyle: {
              color: function(params) {
                const value = topFollowers[params.dataIndex].fansIncreaseLast30Days;
                return value >= 0 ? 
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {offset: 0, color: 'rgba(103, 194, 58, 0.8)'},
                    {offset: 1, color: 'rgba(103, 194, 58, 0.4)'}
                  ]) : 
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {offset: 0, color: 'rgba(245, 108, 108, 0.8)'},
                    {offset: 1, color: 'rgba(245, 108, 108, 0.4)'}
                  ]);
              },
              borderRadius: [0, 4, 4, 0]
            },
            label: {
              show: true,
              position: 'right',
              formatter: function(params) {
                const value = topFollowers[params.dataIndex].fansIncreaseLast30Days;;
                return value >= 0 ? '+' + value.toLocaleString() : value.toLocaleString();
              },
              fontSize: 12,
              color: '#303133',
              fontWeight: 'bold'
            }
          }
        ]
      };
      
      followerChart.value.setOption(option);
    };

    // 初始化营收排行榜
    const initRevenueChart = () => {
      // 获取营收前五的艺人
      const topRevenue = [...artistData.value]
        .sort((a, b) => b.revenueLast30Days  - a.revenueLast30Days )
        .slice(0, 5);
      
      const chartDom = document.getElementById('revenue-chart');
      revenueChart.value = echarts.init(chartDom);
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            const value = params[0].value;
            return `<div style="font-weight:bold;margin-bottom:5px;">${params[0].name}</div>` +
                   `营收: <span style="color:${value >= 0 ? '#409EFF' : '#F56C6C'};font-weight:bold;">` +
                   `¥${value.toLocaleString()}</span>`;
          }
        },
        grid: {
          left: '3%',
          right: '10%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: function(value) {
              return '¥' + (value >= 10000 ? (value / 10000) + '万' : value);
            },
            color: '#909399',
            fontSize: 10
          },
          splitLine: {
            lineStyle: {
              color: '#EBEEF5',
              type: 'dashed'
            }
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'category',
          data: topRevenue.map(item => item.name),
          axisLabel: {
            color: '#303133',
            fontWeight: 500,
            fontSize: 12
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: '营收',
            type: 'bar',
            barWidth: '60%',
            data: topRevenue.map(item => item.revenueLast30Days),
            itemStyle: {
              color: function(params) {
                const value = topRevenue[params.dataIndex].revenueLast30Days;
                return value >= 0 ? 
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {offset: 0, color: 'rgba(64, 158, 255, 0.8)'},
                    {offset: 1, color: 'rgba(64, 158, 255, 0.4)'}
                  ]) : 
                  new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                    {offset: 0, color: 'rgba(245, 108, 108, 0.8)'},
                    {offset: 1, color: 'rgba(245, 108, 108, 0.4)'}
                  ]);
              },
              borderRadius: [0, 4, 4, 0]
            },
            label: {
              show: true,
              position: 'right',
              formatter: function(params) {
                return '¥' + topRevenue[params.dataIndex].revenueLast30Days.toLocaleString();
              },
              fontSize: 12,
              color: '#303133',
              fontWeight: 'bold'
            }
          }
        ]
      };
      
      revenueChart.value.setOption(option);
    };

    // 初始化趋势图
    const initTrendChart = () => {
      const chartDom = document.getElementById('trend-chart');
      trendChart.value = echarts.init(chartDom);
      updateTrendChart();
    };

    // 更新趋势图
    const updateTrendChart = () => {
      if (!trendChart.value) return;
      
      const seriesData = trendType.value === 'followers' ? trendData.value.followers : trendData.value.revenue;
      const seriesName = trendType.value === 'followers' ? '粉丝量' : '营收';
      const color = trendType.value === 'followers' ? '#67C23A' : '#409EFF';
      
      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#EBEEF5',
          borderWidth: 1,
          textStyle: {
            color: '#303133'
          },
          padding: [10, 15],
          formatter: function(params) {
            if (trendType.value === 'followers') {
              return `<div style="font-weight:bold;margin-bottom:5px;">${params[0].name}</div>` +
                     `粉丝量: <span style="color:#67C23A;font-weight:bold;">${params[0].value.toLocaleString()}</span>`;
            } else {
              return `<div style="font-weight:bold;margin-bottom:5px;">${params[0].name}</div>` +
                     `营收: <span style="color:#409EFF;font-weight:bold;">¥${params[0].value.toLocaleString()}</span>`;
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: '20px',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: trendData.value.dates,
          axisLine: {
            lineStyle: {
              color: '#DCDFE6'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#909399',
            margin: 12,
            fontSize: 10,
            rotate: trendData.value.dates.length > 15 ? 30 : 0,
            interval: 'auto'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              color: '#EBEEF5'
            }
          },
          axisLabel: {
            formatter: function(value) {
              if (trendType.value === 'followers') {
                return value >= 10000 ? (value / 10000) + '万' : value;
              } else {
                return '¥' + (value >= 10000 ? (value / 10000) + '万' : value);
              }
            },
            color: '#909399'
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: seriesName,
            type: 'line',
            smooth: true,
            data: seriesData,
            showSymbol: false,
            symbolSize: 6,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: color.replace(')', ', 0.2)').replace('rgb', 'rgba') },
                { offset: 1, color: 'rgba(255, 255, 255, 0.05)' }
              ])
            },
            itemStyle: {
              color: color
            },
            lineStyle: {
              width: 3,
              color: color,
              shadowColor: 'rgba(0, 0, 0, 0.1)',
              shadowBlur: 10,
              shadowOffsetY: 5
            },
            emphasis: {
              itemStyle: {
                borderColor: color,
                borderWidth: 2,
                shadowColor: color,
                shadowBlur: 5
              }
            },
            markPoint: {
              symbolSize: 10,
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                borderWidth: 2,
                borderColor: '#fff'
              },
              data: [
                { 
                  type: 'max', 
                  name: '最大值',
                  symbol: 'circle',
                  itemStyle: {
                    color: color,
                    shadowBlur: 5,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                  },
                  label: {
                    show: true,
                    position: 'top',
                    distance: 8,
                    fontSize: 12,
                    color: '#303133',
                    backgroundColor: '#fff',
                    padding: [4, 8],
                    borderRadius: 4,
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10,
                    shadowOffsetY: 2,
                    formatter: function(param) {
                      if (trendType.value === 'followers') {
                        return '最高：' + (param.data.value >= 10000 ? 
                          (param.data.value / 10000).toFixed(1) + '万' : 
                          param.data.value.toLocaleString());
                      } else {
                        return '最高：¥' + (param.data.value >= 10000 ? 
                          (param.data.value / 10000).toFixed(1) + '万' : 
                          param.data.value.toLocaleString());
                      }
                    }
                  }
                },
                { 
                  type: 'min', 
                  name: '最小值',
                  symbol: 'circle',
                  itemStyle: {
                    color: color,
                    shadowBlur: 5,
                    shadowColor: 'rgba(0, 0, 0, 0.3)'
                  },
                  label: {
                    show: true,
                    position: 'bottom',
                    distance: 8,
                    fontSize: 12,
                    color: '#303133',
                    backgroundColor: '#fff',
                    padding: [4, 8],
                    borderRadius: 4,
                    shadowColor: 'rgba(0, 0, 0, 0.1)',
                    shadowBlur: 10,
                    shadowOffsetY: 2,
                    formatter: function(param) {
                      if (trendType.value === 'followers') {
                        return'最低：' + (param.data.value >= 10000 ? 
                          (param.data.value / 10000).toFixed(1) + '万' : 
                          param.data.value.toLocaleString());
                      } else {
                        return '最低：¥' + (param.data.value >= 10000 ? 
                          (param.data.value / 10000).toFixed(1) + '万' : 
                          param.data.value.toLocaleString());
                      }
                    }
                  }
                }
              ]
            },
            markLine: {
              silent: true,
              lineStyle: {
                color: '#909399',
                width: 1,
                type: 'dashed'
              },
              symbol: ['none', 'none'],
              label: {
                show: true,
                position: 'middle',
                formatter: function(param) {
                  const avgValue = param.data.value;
                  if (trendType.value === 'followers') {
                    return '平均: ' + (avgValue >= 10000 ? 
                      (avgValue / 10000).toFixed(1) + '万' : 
                      avgValue.toLocaleString());
                  } else {
                    return '平均: ¥' + (avgValue >= 10000 ? 
                      (avgValue / 10000).toFixed(1) + '万' : 
                      avgValue.toLocaleString());
                  }
                },
                color: '#303133',
                backgroundColor: '#fff',
                padding: [4, 8],
                borderRadius: 4,
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10,
                shadowOffsetY: 2,
                fontSize: 12
              },
              data: [
                { type: 'average', name: '平均值' }
              ]
            }
          }
        ]
      };
      
      trendChart.value.setOption(option);
    };

    // 监听趋势类型变化
    watch(trendType, () => {
      updateTrendChart();
    });

    // 监听窗口大小变化，调整图表大小
    const handleResize = () => {
      if (followerChart.value) followerChart.value.resize();
      if (revenueChart.value) revenueChart.value.resize();
      if (trendChart.value) trendChart.value.resize();
    };

    // 处理活动
    const markActivityComplete = (activityId) => {
      const index = activities.value.findIndex(activity => activity.id === activityId);
      if (index !== -1) {
        activities.value[index].status = 'completed';
        // 可以添加API调用以更新服务器数据
      }
    };

    const deleteActivity = (activityId) => {
      const index = activities.value.findIndex(activity => activity.id === activityId);
      if (index !== -1) {
        activities.value.splice(index, 1);
        // 可以添加API调用以更新服务器数据
      }
    };

    onMounted(() => {
      fetchArtistData();
      fetchActivities();
      window.addEventListener('resize', handleResize);
    });

    return {
      artistData,
      trendType,
      totalRevenue,
      totalFollowers,
      revenueGrowth,
      followerGrowth,
      activeArtists,
      activeArtistsGrowth,
      expiringSoon,
      expiringDays,
      activities,
      activityFilter,
      filteredActivities,
      getActivityColor,
      getActivityTagType,
      getActivityTypeText,
      markActivityComplete,
      deleteActivity
    };
  }
};
</script>

<style scoped>
.dashboard-container {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: 100%;
  overflow-x: hidden;
}

.data-cards {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.data-card {
  flex: 1;
  margin-right: 16px;
  text-align: left;
  border-radius: 8px;
  transition: all 0.3s;
  min-width: 220px;
  max-width: calc(25% - 12px);
  position: relative;
  overflow: hidden;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.data-card:last-child {
  margin-right: 0;
}

.revenue-card {
  border-left: 4px solid #409EFF;
}

.followers-card {
  border-left: 4px solid #67C23A;
}

.artists-card {
  border-left: 4px solid #E6A23C;
}

.contracts-card {
  border-left: 4px solid #F56C6C;
}

.card-content {
  padding: 0px 16px;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  height: 100%;
}

.card-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.03;
  z-index: -1;
}

.revenue-card .card-content::before {
  background-color: #409EFF;
}

.followers-card .card-content::before {
  background-color: #67C23A;
}

.artists-card .card-content::before {
  background-color: #E6A23C;
}

.contracts-card .card-content::before {
  background-color: #F56C6C;
}

.card-header-container {
  display: flex;
  align-items: center;
  margin-bottom: 0px;
  line-height: 100px;
}

.card-header-info {
  display: flex;
  justify-content: space-between;
  flex: 1;
  align-items: center;
}

.card-value-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 20px;
  flex-shrink: 0;
}

.revenue-card .card-icon {
  background-color: rgba(64, 158, 255, 0.1);
  color: #409EFF;
}

.followers-card .card-icon {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

.artists-card .card-icon {
  background-color: rgba(230, 162, 60, 0.1);
  color: #E6A23C;
}

.contracts-card .card-icon {
  background-color: rgba(245, 108, 108, 0.1);
  color: #F56C6C;
}

.card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.card-title {
  font-size: 14px;
  color: #909399;
  font-weight: 500;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin: 0;
  line-height: 1.2;
  text-align: center;
  margin-bottom: 10px;
}

.card-trend, .card-info {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.card-trend.up {
  color: #67C23A;
}

.card-trend.down {
  color: #F56C6C;
}

.card-info {
  color: #909399;
}

.charts-container {
  margin-bottom: 24px;
}

.chart-card {
  margin-bottom: 24px;
  border-radius: 8px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.chart-card .el-card__body {
  padding: 0;
}

.follower-chart-card {
  border-top: 4px solid #67C23A;
}

.follower-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.revenue-chart-card {
  border-top: 4px solid #409EFF;
}

.revenue-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.activities-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-top: 4px solid #E6A23C;
}

.activities-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.activities-card .el-card__body {
  flex: 1;
  overflow: hidden;
  padding: 0;
}

.trend-chart-card {
  border-top: 4px solid #8e44ad;
}

.trend-chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(142, 68, 173, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
  z-index: 0;
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #ebeef5;
  position: relative;
  z-index: 1;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  line-height: 50px;
}

.header-title .el-icon {
  font-size: 18px;
}

.follower-chart-card .header-title .el-icon {
  color: #67C23A;
}

.revenue-chart-card .header-title .el-icon {
  color: #409EFF;
}

.activities-card .header-title .el-icon {
  color: #E6A23C;
}

.trend-chart-card .header-title .el-icon {
  color: #8e44ad;
}

.card-header .el-radio-group {
  font-size: 12px;
  transform: scale(0.92);
  transform-origin: right center;
}

.card-header .el-radio-button--small {
  height: 28px;
}

.card-header .el-radio-button__inner {
  padding: 0 10px;
}

.chart {
  height: 360px;
  padding: 16px;
  position: relative;
  z-index: 1;
}

.activities-container {
  height: 360px;
  overflow-y: auto;
  text-align: left;
  padding: 10px 16px;
  position: relative;
  z-index: 1;
}

.activities-container::-webkit-scrollbar {
  width: 5px;
}

.activities-container::-webkit-scrollbar-thumb {
  background-color: #dcdfe6;
  border-radius: 3px;
}

.activities-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.activity-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  transition: all 0.3s;
}

.activity-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
  border-radius: 4px;
  padding: 8px 8px;
  margin: 0 -8px;
}

.activity-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 85%;
}

:deep(.el-timeline-item) {
  position: relative;
  padding-bottom: 15px;
}

:deep(.el-timeline-item__wrapper) {
  padding-bottom: 10px;
}

:deep(.el-timeline-item__timestamp) {
  font-size: 12px;
  color: #909399;
  margin-bottom: 8px;
  display: block;
}

:deep(.el-timeline-item__tail) {
  border-left: 2px solid #e4e7ed;
  left: 8px;
}

:deep(.el-timeline-item__node--normal) {
  width: 10px;
  height: 10px;
  left: 4px;
}

:deep(.el-timeline-item__content) {
  padding: 0 0 0 25px;
}

.activities-header {
  padding: 12px 16px;
}

.activities-header .header-title {
  display: flex;
  align-items: center;
  width: 100%;
}

.activities-header .el-radio-group {
  margin-left: auto;
  transform: scale(0.92);
  transform-origin: right center;
}

@media screen and (max-width: 1200px) {
  .data-card {
    max-width: calc(50% - 12px);
    margin-bottom: 16px;
  }
  
  .card-title {
    font-size: 13px;
  }
  
  .card-value {
    font-size: 24px;
  }
  
  .card-header-info {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-trend, .card-info {
    margin-top: 4px;
  }
  
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-header .el-radio-group {
    margin-top: 8px;
  }
}

@media screen and (max-width: 992px) {
  .card-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .card-header .el-radio-group {
    margin-top: 8px;
  }
}

@media screen and (max-width: 768px) {
  .data-card {
    max-width: 100%;
    margin-right: 0;
  }
  
  .data-cards {
    flex-direction: column;
  }
  
  .card-content {
    padding: 12px;
  }
  
  .card-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .card-value {
    font-size: 22px;
  }
  
  .card-header-info {
    flex-direction: row;
  }
  
  .activities-container {
    height: 250px;
  }
}
</style>
